<template>
  <div>
    <div v-if="isLoading">正在加载js中<el-icon class="is-loading" size="20">
        <Loading />
      </el-icon>
    </div>
    <div v-else>加载成功</div>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs } from 'vue';
import { Loading } from '@element-plus/icons-vue';
import { useScriptTag } from '@vueuse/core';
export default {
  name: '',
  props: {},
  components: { Loading },
  setup(props, { emit }) {
    function initState() {
      return {
        isLoading: true,
      };
    }
    const state = reactive(initState());
    onMounted(() => {
      console.log('准备启动延时器');
      setTimeout(() => {
        useScriptTag('https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.core.min.js', el => {
          console.log('加载了', el);
          state.isLoading = false;
        });
      }, 1000);
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>